<!--Developed By Jack Lee-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ChasingMeClickBro</title>
    <style>
        body {
            background-color: lightgoldenrodyellow;

        }

        #d {
            background-color: lightgrey;
            width: 200px;
            font-size: 18px;
            position: absolute;
            left: 0px;
            z-index: 1;
            box-shadow: 1px 1px 5px rgb(0.2,0.2,0.2);
        }

        .outer {
            border: 2px solid pink;
            width: 720px;
            height: 720px;
            margin: 0 auto;
            position: absolute;
            left: 400px;
            border-radius: 33px;
            background-color: white;
            cursor: pointer;
            box-shadow: 1px 1px 5px rgb(0.2,0.2,0.2);
        }

        .bg {
            width: 720px;
            height: 720px;
            filter: blur(2px);
            position: absolute;
            top: 0;
            left: 0;
            background-image: url("G.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            border-radius: 33px;
        }

        button,select {
            box-shadow: 1px 1px 5px rgb(0.2,0.2,0.2);
        }

    </style>
</head>


<body>

<div class="outer">
    <img id="d" src="img.jpg" style="border-radius: 30px; width: 10%">
    <div class="bg"></div>
</div>

<button id="b1">Using the tools</button>

<select id="select">
    <option>Choose the level</option>
    <option value="10">So Fucking Hard</option>
    <option value="20">Hard</option>
    <option value="50">Not so Hard</option>
    <option value="70">Medium</option>
    <option value="100">Easy</option>
</select>

<br>
<h2>The times you try: <span id="time">0</span></h2>
<h2> The Money you left: $<span id="money">100</span></h2>
<h2>Win 200 Scores If You Are Man</h2>

</body>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script>
    var money = 100;

    $(function () {
        $(".bg").fadeTo("fast", 0.9);
        $("#b1").click(function () {
            var div = $("#d");
            div.animate({right: '100px'}, 100);
            div.animate({right: '300px', top: '200px'}, 200);
            div.animate({right: '500px', top: '100px'}, 300);
            div.animate({right: '700px', top: '200px'}, 200);
            div.animate({right: '900px', top: '100px'}, 100);
            money -= 5;
            $("#money").text(money);
        });

        var time;

        $("#select").change(function () {
            time = $(this).val();
            console.log(time);
            console.log(typeof time);
        });

        $("#d").mousemove(function () {
            if (time == undefined) {
                alert("You have to choose the level");
            } else {

                move = parseInt(Math.random() * 700);
                moveStr = move.toString() + "px";
                var actions = new Array({left: moveStr}, {right: moveStr}, {top: moveStr}, {bottom: moveStr});

                var randInt = parseInt(Math.random() * 3);
                console.log(randInt);
                action = actions[randInt];
                $(this).animate(action, parseInt(time));
                console.log("done!");
                console.log("time is" + time);
                console.log(move);
                console.log(action);
                /*if (move == 520) {
                    alert("You win, and now you have move 520 step");

                }*/
            }

        });

        $("#d").click(function () {
            alert("You win and get the score Bro! ");
            if (time == 10) {
                money += 20;
            } else if (time == 20) {
                money += 15;
            } else if (time == 50) {
                money += 10;
            } else if (time == 70) {
                money += 5;
            } else {
                money += 2;
            }
            $("#money").text(money);
        });

        var times = 0;
        $(".outer").mouseup(function () {
            if (time == undefined) {
                alert("Your have to choose the level.");
            } else {
                times++;
                $("#time").text(times);
                money -= 1;
                $("#money").text(money);
                console.log(times);
            }
        });

    });
</script>

</html>